﻿<template>
<l-layout class="l-tab-page" >
    <l-panel>
        <template #toolLeft >
            <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                <template #f_PurchaseNo >
                    <el-input v-model="queryData.f_PurchaseNo" :placeholder="$t('please enter')"></el-input>
                </template>
                <template #f_PurchaseType >
                    <l-select :options="f_PurchaseTypeOptions" v-model="queryData.f_PurchaseType" ></l-select>
                </template>
                <template #f_DeliveryDate >
                    <l-date format="yyyy-MM-dd HH:mm:ss"  dateType="datetimerange" v-model="queryData.f_DeliveryDate" :placeholder="$t('please select')" >
                    </l-date>
                </template>
                <template #f_Department >
                    <l-company-select v-model="queryData.f_Department" ></l-company-select>
                </template>
                <template #f_Purchaser >
                    <l-user-select v-model="queryData.f_Purchaser" ></l-user-select>
                </template>
            </l-query2>
        </template>
        <template #toolRight >
            <l-tool-btns  @click="handleAdd()" >
            </l-tool-btns>
        </template>
        <l-table ref="mainTable" 
            :loading="tableLoading" 
            :columns="lr_getPageColumns(columns)" 
            :dataSource="tableData"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"
            @loadPageData="turnTablePage"
            >
            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog :title="$t(formTitle)"
                :visible.sync="formVisible"
                :height="600"
                :width="1024"
                @ok="handleSave"
                @close="handleCloseForm"
                @opened="handleOpenedForm">
        <my-form ref="form" ></my-form>
    </l-dialog>
    
</l-layout>
</template>
<script>
import MyForm from './form'
const api = window.$api.erp.purchaseOrder
export default {
    components: {
        MyForm
    },
    data() {
        return {
            lr_isPage:true,
            // query参数
            queryData:{
                f_PurchaseNo:'',
                f_PurchaseType:'',
                f_DeliveryDate:'',
                f_Department:'',
                f_Purchaser:'',
            },

            queryItems:[
                {label:'单据编码',prop:'f_PurchaseNo'},
                {label:'采购类别',prop:'f_PurchaseType'},
                {label:'交货日期',prop:'f_DeliveryDate',span:24},
                {label:'申请单位',prop:'f_Department'},
                {label:'采购员',prop:'f_Purchaser'},
            ],

            // 表格参数
            tableLoading: false,
            tableData:[],
            tableTotal:0,
            tableCurrentPage:1,
            tablePageSize:50,
            columns: [
                {label:'单据编码',prop:'f_PurchaseNo',width:120,align:'left'},
                {label:'申请日期',prop:'f_ApplyDate',width:160,align:'left',dataType:'datetime'},
                {label:'主题',prop:'f_Theme',minWidth:120,align:'left'},
                {label:'采购类别',prop:'f_PurchaseType',width:80,align:'left',dataType:'mydata',options:[ {"value":"2","label":"新闻类"},{"value":"3","label":"产品类"},{"value":"4","label":"信息类"}]},
                {label:'申请人',prop:'f_Appler',minWidth:120,align:'left',dataType:'user'},
                {label:'申请单位',prop:'f_Department',minWidth:120,align:'left',dataType:'company'},
                {label:'采购员',prop:'f_Purchaser',width:80,align:'left',dataType:'user'},
                {label:'总价',prop:'f_Total',minWidth:120,align:'left'},
                {label:'支付方式',prop:'f_PaymentType',minWidth:120,align:'left',dataType:'mydata',options:[{"value":"0","label":"现金"},{"value":"1","label":"票汇"},{"label":"信汇","value":"2"},{"label":"电汇","value":"3"},{"label":"承兑","value":"4"},{"label":"信用证","value":"5"}]},
                {label:'交货日期',prop:'f_DeliveryDate',width:160,align:'left',dataType:'datetime'},
                {label:'对方代表',prop:'f_Your',minWidth:120,align:'left'},
                {label:'备注',prop:'f_Description',minWidth:120,align:'left'},
            ],
            tableBtns:[
                {prop:'Edit',label:'Edit',width:40},
                {prop:'Delete',label:'Delete',width:40},
            ],

            // 表单参数
            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false,
        };
    },
    computed: {
        f_PurchaseTypeOptions(){
            return [{"value":"2","label":"新闻类"},{"value":"3","label":"产品类"},{"value":"4","label":"信息类"}]
        },
        f_PaymentTypeOptions(){
            return [{"value":"0","label":"现金"},{"value":"1","label":"票汇"},{"label":"信汇","value":"2"},{"label":"电汇","value":"3"},{"label":"承兑","value":"4"},{"label":"信用证","value":"5"}]
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()
        },
        handleSearch(){
            this.loadTableData()
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let queryData = this.$deepClone(this.queryData)
            if(!this.$validatenull(queryData.f_DeliveryDate)){
                queryData.f_DeliveryDate_end = queryData.f_DeliveryDate.split(' - ')[1]
                queryData.f_DeliveryDate = queryData.f_DeliveryDate.split(' - ')[0]
            }

            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_Id'
            let data = await this.$awaitWraper(api.getPage(queryData))
            if(data != null){
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else{
                this.tableData = []
            }
            this.tableLoading = false
        },

        handleAdd(){
            this.formEdit = false
            this.handleShowForm("Add订单")
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.handleShowForm("Edit订单")
        },
        handleDelete($index,row){
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
            confirmButtonText: this.$t('confirm'),
            cancelButtonText: this.$t('cancel'),
            type: 'warning'
            }).then(async () => {
                this.tableData.splice($index,1);
                this.tableTotal--;
                await api.remove(row.f_Id)
                this.$message({
                    type: 'success',
                    message: this.$t('Delete  success')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled!')
                })
            })
        },

        async handleSave(showLoading, hideLoading) {
            if (await this.$refs.form.validateForm()) {
                showLoading()
                const postData = this.$refs.form.getForm()
                let res = ''
                if(this.formEdit){// Edit
                    res = await this.$awaitWraper(api.update(this.formEditRow.f_Id,postData))
                }
                else{// Add
                    res = await this.$awaitWraper(api.add(postData))
                }
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('save success!')
                    })
                    this.loadTableData()
                    this.formVisible = false
                }

                hideLoading()
            }
        },

        handleShowForm(text) {
            this.formTitle = text;
            this.formVisible = true;
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('Loading data...')
                let data = await this.$awaitWraper(api.get(this.formEditRow.f_Id))
                if(data){
                    this.$refs.form.setForm(data)
                }

                hideLoading()
            }
        },
        handleCloseForm() {
            this.$refs.form.resetForm();
        }
    }
}
</script>
